<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <a-divider orientation="left"><span class="text-bold">{{ $ct("customCheck", "自定义校验") }}</span></a-divider>
            <div>
                我们提供了validateStatus,help,hasFeedback等属性,使用户可以不需要使用Form.create和getFieldDecorator,自己定义校验的时机和内容。
                <br>
                1.validateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。
                <br>
                2.hasFeedback:用于给输入框添加反馈图标。
                <br>
                3.help:设置校验文案。
            </div>
            <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="失败" validate-status="error" help="请输入内容">
                    <a-input id="error" placeholder="校验失败演示" />
                </a-form-item>
                <a-form-item label="警告" validate-status="warning">
                    <a-input id="warning" placeholder="警告演示" />
                </a-form-item>
                <a-form-item label="确认中" has-feedback validate-status="validating" help="输入内容正在验证中....">
                    <a-input id="validating" placeholder="验证中演示" />
                </a-form-item>
                <a-form-item label="成功" has-feedback validate-status="success">
                    <a-input id="success" placeholder="校验成功演示" />
                </a-form-item>
                <a-form-item label="警告" has-feedback validate-status="warning">
                    <a-input id="warning2" placeholder="带有图标的警告框演示" />
                </a-form-item>
                <a-form-item label="失败" has-feedback validate-status="error" help="请输入内容">
                    <a-input id="error2" placeholder="校验失败演示" />
                </a-form-item>
                <a-form-item label="成功" has-feedback validate-status="success">
                    <a-date-picker style="width: 100%" />
                </a-form-item>
                <a-form-item label="警告" has-feedback validate-status="warning">
                    <a-time-picker style="width: 100%" />
                </a-form-item>
                <a-form-item label="错误" has-feedback validate-status="error">
                    <a-select default-value="1">
                        <a-select-option value="1">
                            Option 1
                        </a-select-option>
                        <a-select-option value="2">
                            Option 2
                        </a-select-option>
                        <a-select-option value="3">
                            Option 3
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="确认中" has-feedback validate-status="validating" help="所选内容正在验证中....">
                    <a-cascader :default-value="['1']" :options="[]" />
                </a-form-item>
                <a-form-item label="日期" style="margin-bottom:0;">
                    <a-form-item validate-status="error" help="请选择正确的日期"
                        :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                        <a-date-picker style="width: 100%" />
                    </a-form-item>
                    <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
                        -
                    </span>
                    <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                        <a-date-picker style="width: 100%" />
                    </a-form-item>
                </a-form-item>
                <a-form-item label="成功" has-feedback validate-status="success">
                    <a-input-number style="width: 100%" />
                </a-form-item>
                <a-form-item label="成功" has-feedback validate-status="success">
                    <a-input allow-clear placeholder="with allowClear" />
                </a-form-item>

                <a-form-item label="警告" has-feedback validate-status="warning">
                    <a-input-password placeholder="with input password" />
                </a-form-item>

                <a-form-item label="错误" has-feedback validate-status="error">
                    <a-input-password allow-clear placeholder="" />
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 8
            },
        };
    },
};
</script>

<style lang="scss" scoped></style>
